<template>
	<view class="uiwu">
		<view class="uiwu-form">
			<view class="item uiwu-flex-align">
				<text>收货人</text>
				<input type="text" v-model="fromData.real_name" placeholder="请填写收货人姓名">
			</view>
			<view class="item uiwu-flex-align">
				<text>联系方式</text>
				<input type="number" v-model="fromData.phone" placeholder="请填写手机号码">
			</view>
			<view class="item uiwu-flex-align">
				<text>所在地区</text>
				<uiwu-city-picker rangeKey="n" isArea :list="citylist" style="flex: 1;" @changes="changePick">
					<view class="uiwu-flex-align">
						<input disabled type="text" v-model="addressDetail" placeholder="请选择省、市、区">
						<uiwu-icon type="arrowright" style="width: auto;" color="#999"></uiwu-icon>
					</view>
				</uiwu-city-picker>
			</view>
			<view class="item uiwu-flex-align">
				<text>详细地址</text>
				<input type="text" v-model="fromData.detail" placeholder="请填写小区、街道、门牌号等信息">
			</view>
		</view>
		<view class="items uiwu-flex-space">
			<text>设置为默认</text>
			<switch :checked="checkedSwitch" color="#EF821E" style="transform: scale(0.7);" @change="ChangeAdress" />
		</view>
		<uiwu-footer>
			<view class="uiwu-footer">
				<view @tap="submit(fromData)" class="uiwu-footer-box uiwu-flex-center">完成</view>
			</view>
		</uiwu-footer>
	</view>
</template>

<script setup lang="ts">
	import { onLoad } from '@dcloudio/uni-app';
	import { addAddress, city_list } from '@/api/api';
	import { ref } from "vue";
	import { uiwu } from '../../config/config';
	const checkedSwitch = ref<any>(false);
	const citylist = ref<Array<object>>([])
	const addressDetail = ref<string>(null)
	const fromData = ref({
		address: {
			province: "北京市", 
			city: "北京市", 
			district: "东城区", 
		},
		detail: "",
		is_default: 0,
		phone: "",
		real_name: ""
	})
	const getcity_list = async () : void => {
		const { data } = await city_list();
		citylist.value = data
	}
	const submit = async (data:object) : void => {
		if(!data.real_name) return uiwu.toast('收货人名字不能为空')
		if(!uiwu.validateInput(data.phone,'phone')) return
		if(!addressDetail.value) return uiwu.toast('请选择省市区')
		if(!data.detail) return uiwu.toast('请填写详细地址')
		const result = await addAddress(data)
		uiwu.toast('操作成功')
		setTimeout(()=>{
			uni.navigateBack()
		},400)
	}
	const changePick = (e:object) => {
		fromData.value.address.city = e.city
		fromData.value.address.province = e.province
		fromData.value.address.district = e.area
		addressDetail.value = e.city_name
	}
	const ChangeAdress = ({detail:{value}}) : void => {
		fromData.value.is_default = value ? 1 : 0
	}
	onLoad(({data})=>{
		if(data){
			// 编辑模式数据回填渲染
			const e = JSON.parse(data)
			fromData.value.address.city = e.city
			fromData.value.address.province = e.province
			fromData.value.address.district = e.district
			addressDetail.value = `${e.province} ${e.city} ${ e.district }`
			fromData.value.phone = e.phone
			fromData.value.real_name = e.real_name
			fromData.value.detail = e.detail
			fromData.value.is_default = e.is_default
			checkedSwitch.value = e.is_default ? true : false
			fromData.value.id = e.id
		}
		getcity_list()
	})
</script>

<style lang="scss">
	page{
		background-color: #F6F6F6;
	}
	.uiwu-form{
		padding: 0 24rpx;
		background-color: #fff;
		margin: 20rpx 0;
		.item{
			padding: 30rpx 0;
			border-bottom: 1rpx solid #F6F6F6;
			&:last-child{
				border-bottom: 0;
			}
			text{
				font-size: 28rpx;
				font-weight: bold;
				color: #231815;
				width: 140rpx;
			}
			input{
				flex: 1;
				font-size: 28rpx;
			}
		}
	}
	.items{
		background-color: #fff;
		padding: 30rpx 24rpx;
		text{
			font-size: 28rpx;
			font-weight: bold;
			color: #231815;
		}
	}
	.uiwu-footer{
		width: 100%;
		padding: 19rpx 32rpx 5rpx;
		background-color: #fff;
		&-box{
			width: 100%;
			height: 80rpx;
			background: #EF821E;
			border-radius: 40rpx;
			font-size: 32rpx;
			font-weight: bold;
			color: #FFFFFF;
		}
	}
</style>
